﻿@{
ViewBag.Title = "项目成本详单";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section mystyle{

}

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1 class="text-center"><!--某品牌-类型-某日-执行--></h1>
      <h5>项目成本合计：<span id="allCost"></span></h5>
      <div>
        <button type="button" class="btn btn-warning" id="add"><span class="glyphicon glyphicon-list-alt"></span><span class="margin-left-10">添加成本明细</span></button>
      </div>
      <div>
        <table class="table table-striped table-hover" id="listTable"></table>
      </div>

    </div>
    <div class="col-sm-12 clearfix">
      <!--<div class="pages"></div>-->
      <p class="float-left">总条数：<span id="totalRow">20</span></p>

      <div class="table-pagination float-right line-height-34 margin-left-10 text-center" id="pages"></div>

      <div class="float-right">
        <form class="form-inline">
          <span>显示条数：</span>
          <select name="pageSize" id="pageSize" class="form-control">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
          </select>
        </form>
      </div>


    </div>
  </div>
</div>

<script id="l3List" type="text/html">
  <thead>
  <tr>
    <th></th>
    <th>费用明细</th>
    <th>金额</th>
    <th>使用日期</th>
    <!--<th>录入日期</th>-->
    <th>备注</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  {{each $data}}
  <tr>
    <td>{{$index + 1}}</td>
    <td>{{$value.CostType}}</td>
    <td>{{$value.Money}}</td>
    <td>{{$value.CostDate}}</td>
    <td>{{$value.Remark}}</td>
    <td>
      <button type="button" class="btn btn-danger del">删除</button>
    </td>
  </tr>
  {{/each}}
  </tbody>

</script>

<!-- 项目成本提交 -->
<div class="modal fade" id="costPost" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content padding-10 w700">
      <div class="text-right">
        <a class="close-pop" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
      </div>
      <div>
        <form class="form-horizontal" id="form">
          <div>
            <div class="form-group">
              <div class="col-sm-3">
                <select class="form-control" name="" id="" v-model="form.cName">
                  <option v-for="option in select" v-bind:value="option.ID">
                    {{ option.Text }}
                  </option>
                </select>
              </div>
              <div class="col-sm-8">
                <input type="text" name="" id="" class="form-control text-right" placeholder="元" v-model="form.cost">
              </div>
            </div>

            <div class="form-group">
              <label for="" class="col-sm-3 control-label">使用日期</label>
              <div class="col-sm-8">
                <div class="datepk-box c-select vm pop-style vm">
                  <input type="text" name="" id="" readonly class="datepk form-control" v-model="form.date">
                  <span class="c-select-btn"></span>
                </div>
               <!-- <div class="input-group date">
                  <input type="text" class="form-control" v-model="form.date">
                  <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                  </div>
                </div>-->
              </div>
            </div>

            <div class="form-group">
              <label for="" class="col-sm-3 control-label">备注</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" name="" id="" placeholder="备注" v-model="form.etc">
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-3 col-sm-offset-3">
              <button type="button" class="btn btn-success" v-on:click="add()"><span class="glyphicon glyphicon-plus-sign"></span></button>
            </div>
          </div>

          <div v-for="list in allList" v-if="allList.length > 0" class="cost-list">
            <div class="form-group">
              <label for="" class="col-sm-3 control-label">{{list.name}}</label>
              <div class="col-sm-8 line-height-34">{{list.cost}}</div>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-3 control-label">使用日期</label>
              <div class="col-sm-8 line-height-34">{{list.date}}</div>
            </div>
            <div class="form-group">
              <label for="" class="col-sm-3 control-label">备注</label>
              <div class="col-sm-8 line-height-34">{{list.etc}}</div>
            </div>
          </div>

        </form>


      </div>
    </div>
  </div>
</div>

@section myscript{
<script src="~/Content/vendor/vue/vue.min.js"></script>
<script src="~/Content/js/bind32.js"></script>
}